<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue-router.js"></script>

    <link rel="stylesheet" href="../libs/animate.css">
    <!-- jquery  -->
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>  
    <style>
        .box{
            width:400px;
            height: 400px;
            border:1px solid darkgoldenrod;
            border-radius: 10px;
            overflow: auto;
            padding: 10px;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .slot{
            width:50%;
            margin-top: 20px;
            border: 1px solid darkmagenta;
            border-radius: 10px;
            padding:30px;
        }
        .router-link-exact-active ,.router-link-active {
            padding:5px;
            border-radius: 5px;
            background: darkorange;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <m-head></m-head>
        <hr>
        <h2>路由Demo</h2>
        <div class="box">
            <!-- 5. 路由出口  告诉vue 在哪里加载路由组件  -->       
            <router-view></router-view>
        </div>

        <div>
            <!-- 6. 路由导航  路由跳转   -->
            
        </div>
    </div>


    
    <template id="main">
        <div>
            <h2>Main - Main - 主视图 </h2>
            <hr>
            <!-- 子路由 -->
            <router-view></router-view>
            <hr>
            <Foot/>   
        </div>
    </template>

    <template id="login">
        <div>
            <h2>Login - Login -  Login 登录 </h2>
        </div>
    </template>

    <template id="notfound">
        <div>
            <h2> notfound - notfound - 404 </h2>
        </div>
    </template>
    <template id="home">
        <div>
            <h2>Home - hOMe = 主页 </h2>
        </div>
    </template>
    <template id="good">
        <div>
            <h2>Good - Good - 商品 </h2>
            <p v-for="(l,i) in list" :key="i" >
                <router-link :to="{name:'detail',params:{id:i},query:l}">{{l.name }}</router-link>
            </p>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>Mine - Mine - Mine </h2>
        </div>
    </template>
    <template id="foot">
        <div>
            <router-link v-for="(l,i) in foots" :key="i" :to="{name:l.name}">
                {{l.text}} 
            </router-link>
        </div>
    </template>
    <template id="detail">
        <div>
            <h2>Detail- Detail - 商品详情 </h2>
            <h2>id --- {{$route.params.id }}</h2>
            <h2>name --- {{$route.query.name }}</h2>
            <h2>歌曲数量  --- {{$route.query.resourceCount }}</h2>
            <hr>
            <button @click="todoback">点击返回</button>
            <button @click="gotologin">进入登录</button>
        </div>
    </template>
    <script>
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

        // 1. 定义 (路由) 组件。
        const Main = {
            template:"#main"
        }
        const Home = {
            template:"#home"
        }
        const Good = {
            template:"#good",
            data(){
                return {
                    list:[]
                }
            },
            mounted(){
                $.ajax({
                    url:"http://47.104.209.44:3333/playlist/catlist",
                    type:"GET",
                    data:{},
                    success:res=>{   // 必须使用箭头函数 
                        console.log(res)
                        this.list = res.sub 
                    }
                })
            }
        }
        const Mine = {
            template:"#mine"
        }
        const Login = {
            template:"#login"
        }
        const NotFound = {
            template:"#notfound"
        }

        const Foot = {
            template:"#foot",
            data(){
                return {
                    foots:[ 
                        {path:"/main/home",component:Home,name:'home',text:"首页",icon:""},
                        {path:'good',name:"good",component:Good,text:"商品",icon:""},
                        {path:'/main/mine',name:'mine',component:Mine,text:"我的",icon:''}
                    ]
                }
            }
        }
        Vue.component("Foot",Foot)

        const Detail = {
            template:"#detail",
            methods:{
                todoback(){
                    this.$router.go(-1) 
                    // this.$router.back()
                },
                gotologin(){
                    router.push({name:'login',query:{name:'zuozuomu'}})
                    // router.push('/login')
                    // router.push({path:'/login'})
                }
            }
        }

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        const routes = [
            { path:"/", redirect:{name:'main'}},
            {   path:"/main",
                component:Main,
                name:'main',
                redirect:"/main/home",
                children:[   // 子路由 对应一个router-view 
                    {path:"/main/home",component:Home,name:'home'},
                    {path:'good',name:"good",component:Good},
                    {path:'/main/mine',name:'mine',component:Mine}
                ]
            },
            {
                path:"/detail/:id",
                name:'detail',
                component:Detail,
            },
            { path:"/login",component:Login,name:'login'},
            { path:"/404",component:NotFound,name:'notfound'},
            { path:"*", redirect:{name:'notfound'}}
        ]


        // 3. 创建路由对象 然后传 `routes` 配置
        const router = new VueRouter({
            routes,
            base:'',
            mode:'hash',
            scrollBehavior(to,from,savePosition){   // 定义滚动行为 
                // return 0;   // 回到最顶部 
                return savePosition

            }
        })
        // scrollBehavior 滚动行为 
        // base 应用的基路径  一般不用设置   采用是相对路径   上线的时候才需要单独去设置路径
        // mode 路由模式   
        // hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置

        // 4. 挂载全局的根实例对象 
        const vm = new Vue({
            router,  // this.$router 
            data:{
                title:"Vue 路由嵌套 ",
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
                console.log(this.$router)  // 全局的路由对象 负责路由跳转 路由显示 
                console.log(this.$route)   // 当前激活的路由信息  可以获取相关的路由参数的  
            }
        }).$mount("#app")
    </script>
    <!-- 
        嵌套路由
       有多少层嵌套就写多少个 children  每一层嵌套都必须对应有一个 router-view 
        
        路由跳转

        1. 声明式  html跳转  router-link   to   
        2. 编程式  javascript 跳转   函数代码跳转  this.$router  router 
        // 字符串  router = this.$router 
        router.push('home')
        // 对象
        router.push({ path: 'home' })
        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' }})
        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' }})

        router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换 
        $route == this.$route   路由对象属性  (params query name)

        router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()  
     -->

</body>
</html>


